<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <style>
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="box">
        {{hello}}--{{time}}
        <div :class="whichColor">切换背景色</div>
        <button @click="handleChange()">点击显示时间</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                hello:"你好世界",
                time: "",
                whichColor:"red",
            },
            methods:{
                handleChange(){
                    console.log("handleChange");
                    this.hello =  "Time:";
                    this.time = "2021-10-10";
                    this.whichColor="yellow";
                }
            }
        })
    </script>
</body>
</html>